<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			#banner{
				position:absolute;
				width: 800px;
				height: 500px;
				left: 50%;
				margin-left: -400px;
				top: 50%;
				margin-top: -250px;
			}
            #banner ul li img{
            	width: 800px;
            	height: 500px;
            }
            #banner ul li{
            	position:absolute;
            }
             #banner dl{
               position:absolute;
            	z-index: 999;
            	/*float: left;*/
            	bottom: 15px;
            	right: 0;
            }
            #banner dl dt{
            	width: 30px;
            	height: 30px;
            	line-height: 30px;
            	text-align: center;
            	border: 1px solid white;
            	border-radius: 50%;
            	float: left;
            	margin-left: 10px;
            }	
            .topimg{
            	z-index: 998;
            }
            .on{
            	background: red;
            }
            .btn{
            	width: 100px;
            	height: 50px;
            	line-height: 50px;
            	text-align: center;
            	background: black;
            	opacity: 0.5;
            	position: absolute;
            	z-index: 1100;
            	font-size: 50px;
            	color:white;
            	top: 50%;
            	margin-top: -25px;
            }
            .btn2{
            	right: 0;
            }	
		</style>
	</head>
	<body>
		<div id="banner">
			<ul>
				<li class="topimg"><img src="img/photo0.png"/></li>
				<li><img src="img/photo1.jpg"/></li>
				<li><img src="img/photo2.jpg"/></li>
				<li><img src="img/photo3.jpg"/></li>
				<li><img src="img/photo4.jpg"/></li>
			</ul>
			<dl>
				<dt class="on">1</dt>
				<dt>2</dt>
				<dt>3</dt>
				<dt>4</dt>
				<dt>5</dt>
			</dl>
			<div class="btn btn1">&lt;</div>
			<div class="btn btn2">&gt;</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
	<script type="text/javascript">
		var num=0;
		var timer
		$(function(){
			stat();
			$('dt').hover(function(){
				clearInterval(timer)
				num=$(this).index()
				show()
			},function(){
				stat()
			})
			$('.btn2').click(function(){
				clearInterval(timer)
				num++;
				if(num==5){
					num=0
				}
				show();
				stat();
			})
			$('.btn1').click(function(){
				clearInterval(timer)
				num--;
				if(num==-1){
					num=4
				}
				show();
				stat();
			})
		})
		function stat(){
			timer=setInterval(function(){
				num++;
				if(num>4){
					num=0
				}
				$('li').eq(num).addClass('topimg').siblings().removeClass('topimg');
				$('dt').eq(num).addClass('on').siblings().removeClass('on')
			},2000)
		}
		function show(){
			$('li').eq(num).addClass('topimg').siblings().removeClass('topimg');
			$('dt').eq(num).addClass('on').siblings().removeClass('on');
		}
	</script>
</html>
